﻿<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<style>
<!--
.div-progress{
	background-color: #e2e2e2;
	position: relative;
	height: 20px;
}
.div-progress-bar{
	height: 20px;
	position: absolute;
	font-size: 12px;
    line-height: 20px;
}
-->
</style>
<div style="padding: 5px;">
	<table class="table-hosts" id="table-hosts">
		<thead>
			<tr>
				<th>主机</th>
				<th>CPU</th>
				<th>内存</th>
				<th>磁盘</th>
			</tr>
		</thead>
		<tbody id="tbody-hosts"></tbody>
	</table>
</div>
<!-- layui规范化用法 -->
<script type="text/javascript">
	var hei = $(document).height();
	$(document).ready(function() {
		$("#table-hosts").width($(document).width() - 280);
		loadHosts();
	});
	function openOneHost(host) {
		workUtils.put("host", host);
		workUtils.open({
			url : 'detail',
			title : host,
			offset : [ '0px', '0px' ],
			width : '100%',
			height : hei,
		});
	}
	function loadHosts() {
		workUtils
				.ajaxGet(
						"../data/host",
						{},
						function(data) {
							var html = "";
							for ( var key in data) {
								var rpcMap = data[key].rpcMap;
								var cpu = 0, cpucores = 0;
								var mem = 0, memnum = 0, ionum = 0;
								var io = 0;
								var flag = false;
								if (rpcMap.cpu) {
									cpu = rpcMap.cpu.cpusage;
									cpucores = rpcMap.cpu.cores + '核';
									mem = (Math.max(rpcMap.mem.used
											- rpcMap.mem.cached, 0))
											/ rpcMap.mem.total;
									memnum = (rpcMap.mem.total / 1024 / 1024)
											.toFixed(0)
											+ 'G';
									io = rpcMap.io.used / rpcMap.io.total;
									for ( var k in rpcMap.io.diskMap) {
										var v = rpcMap.io.diskMap[k].split("_");
										var total = parseInt(v[0]);
										var used = parseInt(v[1]);
										if (total > 0) {
											flag = flag
													|| (used / total > 0.95);
										}
										ionum += total;
									}
									ionum = (ionum / 1024 / 1024).toFixed(0)
											+ 'G';
								}
								html += '<tr>';
								html += '<td onclick="openOneHost(\'' + key
										+ '\');" style="width:10%">' + key;
								if (data[key].timeout) {
									html += '<i class="fa fa-heartbeat" style="color:#FF5722;"></i>';
								}
								html += '</td>';
								html += '<td style="width:25%">'
										+ buildProcess(cpu, cpucores, false)
										+ '</td>';
								html += '<td style="width:25%">'
										+ buildProcess(mem, memnum, false)
										+ '</td>';
								html += '<td style="width:25%">'
										+ buildProcess(io, ionum, flag)
										+ '</td>';
								html += '</tr>';
							}
							$("#tbody-hosts").html(html);
							element.render();
						});
	}

	function buildProcess(rate, num, flag) {
		var html = '';
		var cla = 'layui-bg-green';
		if (rate > 0.6) {
			cla = 'layui-bg-orange';
		} else if (rate > 0.8) {
			cla = 'layui-bg-red';
		}
		rate = toPercent(rate);

		html += '<div class="div-progress layui-progress-big" style="width:75%;float:left;">';
		html += '<div class="div-progress-bar '+cla+' " style="width:'+rate + '">'+rate+'</div></div>';
		html += '<div style="float:right;">'
				+ num
				+ (flag ? '<i class="fa fa-exclamation-triangle" style="color:#FF5722;"></i>'
						: '') + '</div>';
		return html;
	}
	function toPercent(point) {
		var str = Number(point * 100).toFixed(1);
		str += "%";
		return str;
	}
</script>
